<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../../node_modules/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
    <script src="../../../node_modules/element-ui/lib/index.js"></script>


    <!-- 自定义 -->
    <script src="../../../node_modules/mockjs/dist/mock.js"></script>
    <script src="../static/js/mock_config.js"></script>
    <script src="../static/js/index.js"></script>
    <link rel="stylesheet" href="../../index.css">

    <!-- PC -->
    <link rel="stylesheet" href="../static/css/FJXValue.css" media="only screen and (max-height:1600px) ">
</head>

<body>
    <!--主体-->
    <div class="main clearfix" id="app">

        <div class="header">
            <header>
                <div class="navbar">
                    <div class="card_T">
                        <div class="card A" style="background-color:#0b87fa;color: white;">
                            <ul>
                                <li>
                                    <h8 style="line-height: 78px;">价值看板</h8>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="pc_content">
                        <div class="card B" style=" background: #33814e;">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>员工昨日价值 </h4>
                                </li>
                                <li class="list-group-item1">
                                    <h4 id="Yyesterday">合计{{Yyesterday}} </h4>
                                </li>
                            </ul>
                        </div>
                        <div class="card B" style=" background: #33814e;">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>员工当月价值 </h4>
                                </li>
                                <li class="list-group-item1">
                                    <h4 id="Ymonth">合计{{Ymonth}} </h4>
                                </li>
                            </ul>
                        </div>
                        <div class="card B" style=" background:#33814e;">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>设备昨日价值</h4>
                                </li>
                                <li class="list-group-item1">
                                    <h4 id="Syesterday"> 合计{{Syesterday}} </h4>
                                </li>
                            </ul>
                        </div>
                        <div class="card B V" style=" background:#33814e;">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>设备当月价值 </h4>
                                </li>
                                <li class="list-group-item1">
                                    <h4 id="Smonth">合计{{Smonth}} </h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </header>
        </div>

        <div class="main-left">
            <div class="border-container">
                <div class="name-title">
                    员工价值
                </div>
                <div>
                    <el-table :data="defaultDt1" :default-sort="{prop: 'date', order: 'descending'}" stripe="true" ref="defaultDt1" :height=el_table_height cell-style="font-size: 18px">
                        <el-table-column prop="Name"  align="center" label="员工">
                        </el-table-column>
                        <el-table-column prop="BefYestdayManTimeAmt" align="center" label="前日价值">
                        </el-table-column>
                        </el-table-column>
                        <el-table-column prop="YestdayManTimeAmt" align="center" label="昨日价值">
                        </el-table-column>
                        <el-table-column prop="MothManTimeAmt"  align="center" label="当月累计">
                        </el-table-column>
                    </el-table>
                </div>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
        </div>
        <div class="main-right">
            <div class="border-container">
                <div class="name-title">
                    设备价值
                </div>
                <div>
                    <el-table :data="defaultDt2" :default-sort="{prop: 'date', order: 'descending'}" stripe="true" ref="defaultDt2" :height=el_table_height cell-style="font-size: 18px">
                        <el-table-column prop="AsEqName" width="180" align="center" label="设备名称">
                        </el-table-column>
                        <el-table-column prop="YestdayManTimeAmt" align="center" label="昨日价值">
                        </el-table-column>
                        <el-table-column prop="MothManTimeAmt"  align="center" label="当月累计">
                        </el-table-column>
                        </el-table-column>
                        <el-table-column prop="StandardMoyTime" align="center" label="月稼动时长分析">
                        </el-table-column>
                        <el-table-column prop="StandardMoyTimeRate" align="center" label="月稼动率">
                        </el-table-column>
                    </el-table>
                </div>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
        </div>
    </div>

</body>



<script>
    new Vue({
        el: '#app',
        data() {
            return {
                el_table_height: 870,
                defaultDt1: [],
                defaultDt2: [],
                Yyesterday:0,
                Ymonth:0,
                Syesterday:0,
                Smonth:0,

            }
        },
        methods: {
            GetTabelDate(that) {
                // 员工昨日价值
                GetCodeData("VB22010716045453", "Get", "OrderOut").then(function(res) {
                        that.Yyesterday=res.rows[0].YestdayManTimeAmt;
                    }),
                    // 员工当月价值
                GetCodeData("VB22010716070344", "Get", "OrderOut").then(function(res) {
                        that.Ymonth=res.rows[0].MothManTimeAmt;
                    }),
                    // 设备昨日价值
                GetCodeData("VB22010716101546", "Get", "OrderOut").then(function(res) {
                        that.Syesterday=res.rows[0].YestdayManTimeAmt;
                }),
                // 设备当月价值
                GetCodeData("VB22010716111893", "Get", "OrderOut").then(function(res) {
                        that.Smonth=res.rows[0].MothManTimeAmt;
                }),
                    // 员工价值
                GetCodeData("VB22010517334291", "Get", "OrderOut").then(function(res) {
                    that.defaultDt1 = res.rows
                }),
                //设备价值
                GetCodeData("VB22010517474061", "Get", "OrderOut").then(function(res) {
                    that.defaultDt2 = res.rows
                })
            },
        },

        mounted() {
            TableAotoRoll([this.$refs.defaultDt1, this.$refs.defaultDt2])
            var that = this
            setTimeout(function() {
                that.GetTabelDate(that)
            }, 0);
            setInterval(function() {
                that.GetTabelDate(that)
            }, 1000 * 60);
        }
    })
</script>



</html>